<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0;maximum-scale=1'minimum-scale=1;user-scalable=no">
    <title>werewolfkill</title>
    <script>
      (function(){
        var docEl = document.documentElement;
        var fontEl = document.createElement('style');
        var metaEl = document.querySelector('meta[name="viewport"]');

        var dpr = window.devicePixelRatio || 1;
        var scale = 1 / dpr;
        var rem = docEl.clientWidth * dpr / 375;//(这里边除以375是把屏幕分成375等分。比如设计稿750px,那么 1rem = 2px)
// 设置viewport，进行缩放，达到高清效果
//         metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth
//           + ',initial-scale=' + scale + ',maximum-scale=' + scale
//           + ',minimum-scale=' + scale + ',user-scalable=no');
//设置data-dpr属性，留作的css hack之用
        docEl.setAttribute('data-dpr', dpr);
//动态写入样式
        docEl.firstElementChild.appendChild(fontEl);
        fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
//给js调用的，某一dpr下rem和px之间的转换函数
        window.rem2px = function(v) {
          v = parseFloat(v);
          return v * rem;
        };
        window.px2rem = function(v) {
          v = parseFloat(v);
          return v / rem;
        };
        window.dpr = dpr;
        window.rem = rem;
      })();
    </script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
